<template>
  <div class="container">
    <div class="login-form">
      <section class="logo">
        <img src="../../assets/images/logo.png" alt />
      </section>
      <section class="form-content">
        <div class="userName">
          <input type="tel" placeholder="请输入账号" maxlength="11" v-model="userName" />
          <em class="porm-icon">
            <img src="../../assets/images/userTel.png" alt />
          </em>
        </div>
        <div class="userPwd">
          <input type="password" placeholder="请输入密码" maxlength="18" v-model="userPwd" />
          <em class="porm-icon">
            <img src="../../assets/images/userPwd.png" alt />
          </em>
        </div>
      </section>
      <section class="login-btn">
        <button @click="login()">登 录</button>
      </section>
    </div>
    <div class="footer">
      <img src="../../assets/images/login.png" alt />
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import  api from '../../assets/js/api'
export default {
  data() {
    return {
      userName: "",
      userPwd: ""
    };
  },
  mounted() {

    this.isLogin();
  },
  methods: {
    isLogin() {
      if (localStorage.token || localStorage.user_id) {
        // console.log("dddd");
        this.$router.push({
          path: "/indexPage"
        });
      }
    },
    login() {
      // this.axios.defaults.baseURL = api
      let load = this.loading("登录中");
      load.show();
      if (this.userName.trim() == "") {
        load.hide();
        Toast({
          message: "账号不能为空",
          position: "bottom",
          duration: 2000
        });
        return false;
      } else if (this.userPwd.trim() == "") {
        load.hide();
        Toast({
          message: "密码不能为空",
          position: "bottom",
          duration: 2000
        });
        return false;
      } else {

        this.axios
          .post("/api/butler/login", {
            username: this.userName,
            password: this.userPwd
          })
          .then(response => {
            let res = response.data;
            load.hide();
            if (res.code == 200) {
              //存储当前登录的手机号
              localStorage.setItem("phone", this.userName);
              localStorage.setItem("token", res.data.token);
              localStorage.setItem(
                "hospital_list",
                JSON.stringify(res.data.hospital_list)
              );
              //时间筛选器起始值
              // sessionStorage.setItem("select_date",JSON.stringify(res.data.select_date));
              Toast({
                message: "登陆成功",
                position: "bottom",
                duration: 2000
              });
              this.$router.push("/indexPage");
              //window.location.href = "http://test.h5.yuepinyuemei.com/test";
            } else {
              Toast({
                message: res.msg,
                position: "bottom",
                duration: 2000
              });
              return false;
            }
          })
          .catch(error => {
            load.hide();
            Toast({
              message: "请求失败，请稍后重试",
              position: "bottom",
              duration: 2000
            });
          });
        /*  localStorage.setItem("token", "123");
        load.hide();
        this.$router.push("indexPage"); */
      }
    }
  },
  created() {
    document.title = "美美咖驻院管家系统";
    this.axios.defaults.baseURL = api
    console.log(this.axios.defaults)
    if (localStorage.token) {
      // localStorage.removeItem("token");
      // localStorage.removeItem("user_id");
      // localStorage.removeItem("hospital_list");
      window.localStorage.clear();
      window.sessionStorage.clear();
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  .login-form {
    width: 90%;
    min-height: 28.5rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rem 0.06rem 0.63rem 0rem rgba(255, 210, 210, 0.5);
    border-radius: 0.5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    .logo {
      width: 5rem;
      height: 5rem;
      margin: 3rem auto;
      img {
        width: 100%;
      }
    }
    .form-content {
      width: 18rem;
      margin: 0 auto 4rem;
      box-sizing: border-box;
      .userName,
      .userPwd {
        overflow: hidden;
        margin-bottom: 20px;
        position: relative;
        input {
          width: 100%;
          height: 44px;
          line-height: 44px;
          display: block;
          padding-left: 2.5rem;
          font-size: 17px;
          border-bottom: 1px solid rgba(204, 204, 204, 0.29960000000000003);
          letter-spacing: 2px;
          &::placeholder {
            color: rgba(230, 230, 230, 1);
            font-weight: bold;
          }
        }
        .porm-icon {
          width: 40px;
          height: 40px;
          position: absolute;
          bottom: 0px;
          left: 5px;

          img {
            width: 60%;
          }
        }
      }
    }
    .login-btn {
      width: 18rem;
      height: 3rem;
      margin: 3rem auto;
      button {
        width: 100%;
        height: 100%;
        display: block;
        background: linear-gradient(
          180deg,
          rgba(255, 221, 221, 1),
          rgba(255, 131, 166, 1)
        );
        border-radius: 1.5rem;
        color: #fff;
        font-size: 1.25rem;
      }
    }
  }

  .footer {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    img {
      width: 100%;
      display: block;
    }
  }
}
</style>


